<template>
	<view>
		<view class="swiperPanel" @click="opengundon" @touchstart="startMove" @touchend="endMove">
			<view class="swiperItem" v-for="(item, index) in swiperList.slice(0,3)" :key="index" :style="{transform: itemStyle[index].transform, zIndex: itemStyle[index].zIndex, opacity: itemStyle[index].opacity}">
				<view class="children">
					<image class="pic" :src="item.url"></image>
					<view class="vip_wrap">
						<view class="vip_box">
							<view class="vip_left">
								<view class="leval">{{item.leval}}</view>
								<view class="vip_title">{{item.title}}</view>
							</view>
							<view class="vip_right" @tap="toPay(index)">
								<view class="know_more">购买</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			swiperList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				slideNote: {
					x: 0,
					y: 0
				},
				screenWidth: 0,
				itemStyle: [],
				gundong:true
			};
		},
		created() {
			var macInfo = uni.getSystemInfoSync();
			this.screenWidth = macInfo.screenWidth;
			// 计算swiper样式
			this.swiperList.forEach((item, index) => {
				this.itemStyle.push(this.getStyle(index))
			})
		},
		methods: {
			fn(e){
				if(this.swiperList[e].fn){
					this.swiperList[e].fn();
					this.gundong=false;
				}else{
					this.gundong=true;
				}
			},
			toPay(index){
				console.log(index)
				uni.navigateTo({
					url: "/pages/fumao/payrank?shop_id="+this.shop_id
				})
			},
			opengundon(){
				this.gundong=true;
			},
			getStyle(e) {
				if (e > this.swiperList.length / 2) {
					var right = this.swiperList.length - e
					return {
						transform: 'scale(' + (1 - right / 4) + ') translate(-' + (right * 30) + '%,0px)',
						zIndex: 99 - right,
						opacity: 0.8 / right
					}
				} else {
					return {
						transform: 'scale(' + (1 - e / 4) + ') translate(' + (e * 30) + '%,0px)',
						zIndex: 99 - e,
						opacity: 0.8 / e
					}
				}
			},
			startMove(e) {
				let that = this;
				setTimeout(function(){
					if(!that.gundong)return;
					that.slideNote.x = e.changedTouches[0] ? e.changedTouches[0].pageX : 0;
					that.slideNote.y = e.changedTouches[0] ? e.changedTouches[0].pageY : 0;
				},100)
			},
			endMove(e) {
				let that = this;
				setTimeout(function(){
					if(!that.gundong)return;
					var newList = JSON.parse(JSON.stringify(that.itemStyle))
					if ((e.changedTouches[0].pageX - that.slideNote.x) < 0) {
						// 向左滑动
						var last = [newList.pop()]
						newList = last.concat(newList)
					} else {
						// 向右滑动
						newList.push(newList[0])
						newList.splice(0, 1)
					}
				   that.itemStyle = newList
				},100)
			}
		}
	}
</script>

<style lang="scss">
	.swiperPanel {
		margin: 20rpx 0;
		height: 300rpx;
		width: 100%;
		overflow: hidden;
		position: relative;

		.swiperItem {
			height: 100%;
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			transition: all .5s;

			.children {
				height: 100%;
				width: 500rpx;
				margin: 2rpx auto;
				position: relative;
				.pic {
					height: 100%;
					width: 100%;
					border-radius: 30upx;
					// box-shadow: 0 0 30upx #333;
				}
				.vip_wrap{
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 10;
					.vip_box{
						width: 90%;
						margin: 0 auto;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						.vip_left{
							flex: 1;
							height: 60%;
							margin: 0 auto;
							display: flex;
							flex-direction: column;
							justify-content: flex-start;
							.leval{
								font-weight: 600;
								color: #000;
								padding: 10upx 0 10upx 10upx;
							}
							.vip_title{
								font-size: 24upx;
								padding: 10upx 0 10upx 10upx;
								color: #000;
							}
						}
						.vip_right{
							flex: 1;
							height: 60%;
							margin: 0 auto;
							display: flex;
							align-items: flex-end;
							justify-content: center;
							.know_more{
								font-size: 24upx;
								width: 90%;
								height: 60upx;
								background: #e5e5e5;
								border-radius: 35upx;
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}
					}
				}
			}
		}
	}
</style>
